<template>
    <div>
        <div ref="ll" class="ll"></div>
    </div>
</template>
<script>
const charts = require("echarts")
export default {
    data() {
        return {

        }
    },

    methods: {
        fun() {

            const chart = charts.init(this.$refs.ll)
            const option = {
                tooltip: {
                    trigger: 'item',
                    backgroundColor: "red",
                    borderColor: "transparent"
                },
                toolbox: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    }
                },
                legend: {
                    left: 'center',
                    bottom: 0
                },
                grid: {
                    top: "5%"
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['10%', '30%'],
                        // 可以设置饼图的大小
                        // roseType: true,
                        // 是否展示南格尔图
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            // position: 'inner',
                            // label的位置
                            fontSize: 10,
                            position: "outside",

                        },
                        
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },

                        emphasis: {
                            label: {
                               
                            }
                        },
                        labelLine: {
                            show: true,
                            showAbove: true,
                            length: 10,
                            length2: 50
                        },
                        data: [
                            {value: 1048, name: '搜索引擎'},
                            {value: 735, name: '直接访问'},
                            {value: 580, name: '邮件营销'},
                            {value: 484, name: '联盟广告'},
                            {value: 300, name: '视频广告'}
                        ]
                    }
                ]
            }
            chart.setOption(option)
       }

    //    fun1() {
    //        let a = 1
    //        function  fu() {
    //            a = 2
    //            function f() {
    //                console.log(a,"woshi1shui1")
    //            }
    //            f()
    //        }
    //        fu()
    //        console.log(a,"wos")
    //    }
    },

    mounted() {
        this.fun()
        // this.fun()
    }
    
}
</script>
<style scoped>
    .ll{
        width: 300px;
        height: 300px;
    }
</style>